---
title: Add Integrations
i18nReady: true
---

import IntegrationsNav from '~/components/IntegrationsNav.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components'


**Astro integrations** add new functionality and behaviors for your project with only a few lines of code. You can write a custom integration yourself, use an official integration, or use integrations built by the community.

Integrations can…

- Unlock React, Vue, Svelte, Solid, and other popular UI frameworks.
- Integrate tools like Tailwind, and Partytown with a few lines of code.
- Add new features to your project, like automatic sitemap generation.
- Write custom code that hooks into the build process, dev server, and more.

:::tip[Integrations directory]
Browse or search the complete set of hundreds of official and community integrations in our [integrations directory](https://astro.build/integrations/). Find packages to add to your Astro project for authentication, analytics, performance, SEO, accessibility, UI, developer tools, and more.
:::

## Official Integrations

The following integrations are maintained by Astro.

<IntegrationsNav />

## Automatic Integration Setup

Astro includes an `astro add` command to automate the setup of official integrations. Several community plugins can also be added using this command. Please check each integration's own documentation to see whether `astro add` is supported, or whether you must [install manually](#manual-installation).

Run the `astro add` command using the package manager of your choice and our automatic integration wizard will update your configuration file and install any necessary dependencies.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react
  ```
  </Fragment>
</PackageManagerTabs>

It's even possible to add multiple integrations at the same time!

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npx astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm astro add react tailwind partytown
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn astro add react tailwind partytown
  ```
  </Fragment>
</PackageManagerTabs>

:::note[Handling integration dependencies]
If you see any warnings like `Cannot find package '[package-name]'` after adding an integration, your package manager may not have installed [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) for you. To install these missing packages, run `npm install [package-name]`.
:::

### Manual Installation

Astro integrations are always added through the `integrations` property in your `astro.config.mjs` file.

There are three common ways to import an integration into your Astro project:
1. [Install an npm package integration](#installing-an-npm-package).
2. Import your own integration from a local file inside your project.
3. Write your integration inline, directly in your config file.

    ```js
    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';

    export default defineConfig({
      integrations: [
        // 1. Imported from an installed npm package
        installedIntegration(),
        // 2. Imported from a local JS file
        localIntegration(),
        // 3. An inline object
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });
    ```

Check out the [Integration API](/en/reference/integrations-reference/) reference to learn all of the different ways that you can write an integration.

#### Installing an NPM package

Install an NPM package integration using a package manager, and then update `astro.config.mjs` manually.

For example, to install the `@astrojs/sitemap` integration:

<Steps>
1. Install the integration to your project dependencies using your preferred package manager:

   <PackageManagerTabs>
     <Fragment slot="npm">
     ```shell
     npm install @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="pnpm">
     ```shell
     pnpm add @astrojs/sitemap
     ```
     </Fragment>
     <Fragment slot="yarn">
     ```shell
     yarn add @astrojs/sitemap
     ```
     </Fragment>
   </PackageManagerTabs>

2. Import the integration to your `astro.config.mjs` file, and add it to your `integrations[]` array, along with any configuration options:

    ```js title="astro.config.mjs" ins={2} ins="sitemap()"
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });
    ```

    Note that different integrations may have different configuration settings. Read each integration's documentation, and apply any necessary config options to your chosen integration in `astro.config.mjs`
</Steps>

### Custom Options

Integrations are almost always authored as factory functions that return the actual integration object. This lets you pass arguments and options to the factory function that customize the integration for your project.

```js
integrations: [
  // Example: Customize your integration with function arguments
  sitemap({filter: true})
]
```

### Toggle an Integration

Falsy integrations are ignored, so you can toggle integrations on & off without worrying about left-behind `undefined` and boolean values.

```js
integrations: [
  // Example: Skip building a sitemap on Windows
  process.platform !== 'win32' && sitemap()
]
```

## Upgrading Integrations

To upgrade all official integrations at once, run the `@astrojs/upgrade` command. This will upgrade both Astro and all official integrations to their latest versions.

### Automatic Upgrading

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Upgrade Astro and official integrations together to latest
  npx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Upgrade Astro and official integrations together to latest
  pnpm dlx @astrojs/upgrade
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Upgrade Astro and official integrations together to latest
  yarn dlx @astrojs/upgrade
  ```
  </Fragment>
</PackageManagerTabs>

### Manual Upgrading

To upgrade one or more integrations manually, use the appropriate command for your package manager.

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # Example: upgrade React and Tailwind integrations
  npm install @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # Example: upgrade React and Tailwind integrations
  pnpm add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # Example: upgrade React and Tailwind integrations
  yarn add @astrojs/react@latest @astrojs/tailwind@latest
  ```
  </Fragment>
</PackageManagerTabs>

## Removing an Integration

To remove an integration, first uninstall the integration from your project

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm uninstall @astrojs/react
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm remove @astrojs/react
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn remove @astrojs/react
  ```
  </Fragment>
</PackageManagerTabs>

Next, remove the integration from your `astro.config.*` file:

```js title="astro.config.mjs" del={3,7}
import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});
```

## Finding More Integrations

You can find many integrations developed by the community in the [Astro Integrations Directory](https://astro.build/integrations/). Follow links there for detailed usage and configuration instructions.

## Building Your Own Integration

Astro's Integration API is inspired by Rollup and Vite, and designed to feel familiar to anyone who has ever written a Rollup or Vite plugin before.

Check out the [Integration API](/en/reference/integrations-reference/) reference to learn what integrations can do and how to write one yourself.
